<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>洲博通 - Dashboard  Pricing tables </title>
  
	<!-- Bootstrap 4.0-->
	<link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
	
	<!-- Bootstrap extend-->
	<link rel="stylesheet" href="../../css/bootstrap-extend.css">

	<!-- Theme style -->
	<link rel="stylesheet" href="../../css/master_style.css">

	<!-- 洲博通 skins -->
	<link rel="stylesheet" href="../../css/skins/_all-skins.css">	

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

</head>
<body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
<!-- Site wrapper -->
<div class="wrapper">




  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Pricing Table
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="breadcrumb-item"><a href="#">Examples</a></li>
        <li class="breadcrumb-item active">Pricing Table</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
		
			<br><br><br>
		
		<div class="row no-gutters">

              <div class="col-lg-3">
                <div class="box p-60 text-center bg-danger">
                  <h4 class="text-white text-uppercase">Individual</h4>
                  <br>
                  <p>A simple option but powerful to manage your business.</p>
                  <p>Email support</p>
                  <br>
                  <h3 class="price text-white">
                    <sup>$</sup>9
                    <span class="text-white">Monthly</span>
                  </h3>

                  <br>
                  <a class="btn btn-outline btn-light" href="#">Sign up</a>
                </div>
              </div>

              <div class="col-lg-3">
                <div class="box box-shadowed box-round text-center py-80 px-60 b-3 border-primary" style="margin-top:-20px">
                  <h4 class="text-primary text-uppercase">Business</h4>
                  <br>
                  <p>Unlimited product including apps and more features.</p>
                  <p>Mon-Fri support</p>
                  <br>
                  <h3 class="price text-primary">
                    <sup>$</sup>39
                    <span>Monthly</span>
                  </h3>
                  <br>
                  <a class="btn btn-bold btn-block btn-round btn-primary" href="#">Sign up</a>
                </div>
              </div>

              <div class="col-lg-3">
                <div class="box p-60 text-center bg-warning">
                  <h4 class="text-white text-uppercase">Enterprise</h4>
                  <br>
                  <p>The best option for large scale companies.</p>
                  <p>24/7 support</p>
                  <br>
                  <h3 class="price text-white">
                    <sup>$</sup>89
                    <span class="text-white">Monthly</span>
                  </h3>
                  <br>
                  <a class="btn btn-outline btn-light" href="#">Sign up</a>
                </div>
              </div>

              <div class="col-lg-3">
                <div class="box p-60 text-center bg-success">
                  <h4 class="text-white text-uppercase">Ultimate</h4>
                  <br>
                  <p>The best option for large scale companies.</p>
                  <p>24/7 support</p>
                  <br>
                  <h3 class="price text-white">
                    <sup>$</sup>189
                    <span class="text-white">Monthly</span>
                  </h3>
                  <br>
                  <a class="btn btn-outline btn-light" href="#">Sign up</a>
                </div>
              </div>

            </div>
		
			<br><br><br>
		
			<br><br><br>
		
		<div class="row no-gutters">

              <div class="col-lg-3">
                <div class="box p-60 text-center">
                  <h4 class="text-danger text-uppercase">Individual</h4>
                  <br>
                  <p>A simple option but powerful to manage your business.</p>
                  <p>Email support</p>
                  <br>
                  <h3 class="price text-danger">
                    <sup>$</sup>9
                    <span>Monthly</span>
                  </h3>

                  <br>
                  <a class="btn btn-bold btn-block btn-round btn-danger" href="#">Sign up</a>
                </div>
              </div>

              <div class="col-lg-3">
                <div class="box box-shadowed box-round text-center py-80 px-60 b-1 border-primary" style="margin-top:-20px">
                  <h4 class="text-primary text-uppercase">Business</h4>
                  <br>
                  <p>Unlimited product including apps and more features.</p>
                  <p>Mon-Fri support</p>
                  <br>
                  <h3 class="price text-primary">
                    <sup>$</sup>39
                    <span>Monthly</span>
                  </h3>
                  <br>
                  <a class="btn btn-bold btn-block btn-round btn-primary" href="#">Sign up</a>
                </div>
              </div>

              <div class="col-lg-3">
                <div class="box p-60 text-center">
                  <h4 class="text-warning text-uppercase">Enterprise</h4>
                  <br>
                  <p>The best option for large scale companies.</p>
                  <p>24/7 support</p>
                  <br>
                  <h3 class="price text-warning">
                    <sup>$</sup>89
                    <span>Monthly</span>
                  </h3>
                  <br>
                  <a class="btn btn-bold btn-block btn-round btn-warning" href="#">Sign up</a>
                </div>
              </div>

              <div class="col-lg-3">
                <div class="box p-60 text-center">
                  <h4 class="text-success text-uppercase">Ultimate</h4>
                  <br>
                  <p>The best option for large scale companies.</p>
                  <p>24/7 support</p>
                  <br>
                  <h3 class="price text-success">
                    <sup>$</sup>189
                    <span>Monthly</span>
                  </h3>
                  <br>
                  <a class="btn btn-bold btn-block btn-round btn-success" href="#">Sign up</a>
                </div>
              </div>

            </div>
		
			<br><br><br>		
		
			<div class="row gap-y text-center">

              <div class="col-md-6 col-lg-3">
                <div class="rounded shadow-1 hover-shadow-3 transition-5s bg-white b-1 border-success">
                  <p class="text-uppercase font-weight-400 bb-1 py-10 ls-2">Free</p>
                  <br>
                  <h2 class="font-weight-500 font-size-60"><span class="price-dollar">$</span> 0</h2>
                  <br>

                  <small><b>1</b> Agent</small><br>
                  <small><b>1</b> Item Support</small><br>
                  <small><b>100 MB</b> Attachment</small><br>
                  <br>
                  <a class="btn btn-flat btn-success" href="#">Get Started</a>
                  <br><br>
                </div>
              </div>


              <div class="col-md-6 col-lg-3">
                <div class="rounded shadow-1 hover-shadow-3 transition-5s bg-white b-1 border-info">
                  <p class="text-uppercase font-weight-400 bb-1 py-10 ls-2">Personal</p>
                  <br>
                  <h2 class="font-weight-500 font-size-60"><span class="price-dollar">$</span> 9 <span class="price-interval">/mo</span></h2>
                  <br>

                  <small><b>1</b> Agent</small><br>
                  <small><b>10</b> Item Support</small><br>
                  <small><b>10 GB</b> Attachment</small><br>
                  <br>
                  <a class="btn btn-flat btn-info" href="#">Get Started</a>
                  <br><br>
                </div>
              </div>


              <div class="col-md-6 col-lg-3">
                <div class="rounded shadow-1 hover-shadow-3 transition-5s bg-white b-1 border-purple">
                  <p class="text-uppercase font-weight-400 bb-1 py-10 ls-2">Team</p>
                  <br>
                  <h2 class="font-weight-500 font-size-60"><span class="price-dollar">$</span> 39 <span class="price-interval">/mo</span></h2>
                  <br>

                  <small><b>5</b> Agent</small><br>
                  <small><b>25</b> Item Support</small><br>
                  <small><b>100 GB</b> Attachment</small><br>
                  <br>
                  <a class="btn btn-flat btn-purple" href="#">Get Started</a>
                  <br><br>
                </div>
              </div>


              <div class="col-md-6 col-lg-3">
                <div class="rounded shadow-1 hover-shadow-3 transition-5s bg-white b-1 border-yellow">
                  <p class="text-uppercase font-weight-400 bb-1 py-10 ls-2">Business</p>
                  <br>
                  <h2 class="font-weight-500 font-size-60"><span class="price-dollar">$</span> 89 <span class="price-interval">/mo</span></h2>
                  <br>

                  <small><b>50</b> Agent</small><br>
                  <small><b>250</b> Item Support</small><br>
                  <small><b>1,000 GB</b> Attachment</small><br>
                  <br>
                  <a class="btn btn-flat btn-yellow" href="#">Get Started</a>
                  <br><br>
                </div>
              </div>

            </div>
		
			<br><br><br>
		
			<div class="row">

              <div class="col-lg-3">
                <div class="box box-inverse box-primary text-center p-50">
                  <div class="box-body">
                    <h5 class="text-uppercase text-muted">Starter</h5>
                    <br>
                    <h3 class="font-weight-100 font-size-70">$5</h3>
                    <small>Per user/month</small>

                    <hr>

                    <p><strong>500 MB</strong> Storage</p>
                    <p><strong>24x7</strong> Support</p>
                    <p><strong>5</strong> Projects</p>

                    <br><br>
                    <a class="btn btn-bold btn-block btn-outline btn-light" href="#">Select plan</a>
                  </div>
                </div>
              </div>

              <div class="col-lg-3">
                <div class="box box-inverse box-info text-center p-50">
                  <div class="box-body">
                    <h5 class="text-uppercase text-muted">Professional</h5>
                    <br>
                    <h3 class="font-weight-100 font-size-70">$15</h3>
                    <small>Per user/month</small>

                    <hr>

                    <p><strong>50 GB</strong> Storage</p>
                    <p><strong>24x7</strong> Support</p>
                    <p><strong>50</strong> Projects</p>

                    <br><br>
                    <a class="btn btn-bold btn-block btn-outline btn-light" href="#">Select plan</a>
                  </div>
                </div>
              </div>

              <div class="col-lg-3">
                <div class="box box-inverse box-warning text-center p-50">
                  <div class="box-body">
                    <h5 class="text-uppercase text-muted">Advanced</h5>
                    <br>
                    <h3 class="font-weight-100 font-size-70">$25</h3>
                    <small>Per user/month</small>

                    <hr>

                    <p><strong>Unlimited</strong> Storage</p>
                    <p><strong>24x7</strong> Support</p>
                    <p><strong>Unlimited</strong> Projects</p>

                    <br><br>
                    <a class="btn btn-bold btn-block btn-outline btn-light" href="#">Select plan</a>
                  </div>
                </div>
              </div>

              <div class="col-lg-3">
                <div class="box box-inverse box-danger text-center p-50">
                  <div class="box-body">
                    <h5 class="text-uppercase text-muted">Ultimate</h5>
                    <br>
                    <h3 class="font-weight-100 font-size-70">$255</h3>
                    <small>Per user/month</small>

                    <hr>

                    <p><strong>Unlimited</strong> Storage</p>
                    <p><strong>24x7</strong> Support</p>
                    <p><strong>Unlimited</strong> Projects</p>

                    <br><br>
                    <a class="btn btn-bold btn-block btn-outline btn-light" href="#">Select plan</a>
                  </div>
                </div>
              </div>


            </div>
		
			<br><br><br>
		
			<div class="row no-gutters">

              <div class="col-lg-4">
                <div class="box">
                  <div class="box-body text-center">
                    <h5 class="text-uppercase text-muted">Starter package</h5>
                    <br>
                    <h3 class="price">
                      <sup>$</sup>0
                      <span>&nbsp;</span>
                    </h3>

                    <hr>
                    <p><strong>500 MB</strong> Storage</p>
                    <p><strong>24x7</strong> Support</p>
                    <p><strong>5</strong> Project</p>
                    <p><strong>1</strong> User</p>

                    <br><br>
                    <a class="btn btn-bold btn-block btn-success" href="#">Select plan</a>
                  </div>
                </div>
              </div>

              <div class="col-lg-4">
                <div class="box box-inverse box-info">
                  <div class="box-body text-center">
                    <h5 class="text-uppercase text-muted">Professional package</h5>
                    <br>
                    <h3 class="price">
                      <sup>$</sup>5<sup>.99</sup>
                      <span class="text-white">per month</span>
                    </h3>

                    <hr>
                    <p><strong>1 GB</strong> Storage</p>
                    <p><strong>24x7</strong> Support</p>
                    <p><strong>15</strong> Project</p>
                    <p><strong>3</strong> User</p>

                    <br><br>
                    <a class="btn btn-bold btn-block btn-outline btn-light" href="#">Select plan</a>
                  </div>
                </div>
              </div>

              <div class="col-lg-4">
                <div class="box">
                  <div class="box-body text-center">
                    <h5 class="text-uppercase text-muted">Enterprise package</h5>
                    <br>
                    <h3 class="price">
                      <sup>$</sup>15<sup>.99</sup>
                      <span>per month</span>
                    </h3>

                    <hr>
                    <p><strong>5 GB</strong> Storage</p>
                    <p><strong>24x7</strong> Support</p>
                    <p><strong>50</strong> Project</p>
                    <p><strong>10</strong> User</p>

                    <br><br>
                    <a class="btn btn-bold btn-block btn-warning" href="#">Select plan</a>
                  </div>
                </div>
              </div>

            </div>
		
			<br><br><br>	
		
			<div class="row">

              <div class="col-lg-3">
                <div class="box">
                  <div class="box-body text-center">
                    <h3 class="price">
                      <sup>$</sup>0
                      <span>&nbsp;</span>
                    </h3>
                    <h5 class="text-uppercase text-muted">Starter package</h5>

                    <hr>
                    <p><strong>500 MB</strong> Storage</p>
                    <p><strong>24x7</strong> Support</p>
                    <p><strong>5</strong> Project</p>
                    <p><strong>1</strong> User</p>

                    <br><br>
                    <a class="btn btn-bold btn-block btn-warning" href="#">Select plan</a>
                  </div>
                </div>
              </div>

              <div class="col-lg-3">
                <div class="box box-shadowed">
                  <div class="box-body text-center">
                    <h3 class="price">
                      <sup>$</sup>5<sup>.99</sup>
                      <span>per month</span>
                    </h3>
                    <h5 class="text-uppercase text-muted">Professional package</h5>

                    <hr>
                    <p><strong>1 GB</strong> Storage</p>
                    <p><strong>24x7</strong> Support</p>
                    <p><strong>15</strong> Project</p>
                    <p><strong>3</strong> User</p>

                    <br><br>
                    <a class="btn btn-bold btn-block btn-primary" href="#">Select plan</a>
                  </div>
                </div>
              </div>

              <div class="col-lg-3">
                <div class="box">
                  <div class="box-body text-center">
                    <h3 class="price">
                      <sup>$</sup>15<sup>.99</sup>
                      <span>per month</span>
                    </h3>
                    <h5 class="text-uppercase text-muted">Enterprise package</h5>

                    <hr>
                    <p><strong>5 GB</strong> Storage</p>
                    <p><strong>24x7</strong> Support</p>
                    <p><strong>50</strong> Project</p>
                    <p><strong>10</strong> User</p>

                    <br><br>
                    <a class="btn btn-bold btn-block btn-info" href="#">Select plan</a>
                  </div>
                </div>
              </div>

              <div class="col-lg-3">
                <div class="box">
                  <div class="box-body text-center">
                    <h3 class="price">
                      <sup>$</sup>25<sup>.99</sup>
                      <span>per month</span>
                    </h3>
                    <h5 class="text-uppercase text-muted">Ultimate package</h5>

                    <hr>
                    <p><strong>50 GB</strong> Storage</p>
                    <p><strong>24x7</strong> Support</p>
                    <p><strong>50</strong> Project</p>
                    <p><strong>10</strong> User</p>

                    <br><br>
                    <a class="btn btn-bold btn-block btn-danger" href="#">Select plan</a>
                  </div>
                </div>
              </div>

            </div>
		
			<br><br><br>
		
			<div class="row">

              <div class="col-lg-4">
                <div class="box box-transparent">
                  <div class="box-body text-center">
                    <h5 class="text-uppercase text-muted">Starter package</h5>
                    <br>
                    <h3 class="price">
                      <sup>$</sup>0
                      <span>&nbsp;</span>
                    </h3>

                    <hr>
                    <p><strong>500 MB</strong> Storage</p>
                    <p><strong>24x7</strong> Support</p>
                    <p><strong>5</strong> Project</p>
                    <p><strong>1</strong> User</p>

                    <br><br>
                    <a class="btn btn-bold btn-block btn-info-outline" href="#">Select plan</a>
                  </div>
                </div>
              </div>

              <div class="col-lg-4">
                <div class="box card-shadowed">
                  <div class="box-body text-center">
                    <h5 class="text-uppercase text-muted">Professional package</h5>
                    <br>
                    <h3 class="price">
                      <sup>$</sup>5<sup>.99</sup>
                      <span>per month</span>
                    </h3>

                    <hr>
                    <p><strong>1 GB</strong> Storage</p>
                    <p><strong>24x7</strong> Support</p>
                    <p><strong>15</strong> Project</p>
                    <p><strong>3</strong> User</p>

                    <br><br>
                    <a class="btn btn-bold btn-block btn-info" href="#">Select plan</a>
                  </div>
                </div>
              </div>

              <div class="col-lg-4">
                <div class="box box-transparent">
                  <div class="box-body text-center">
                    <h5 class="text-uppercase text-muted">Enterprise package</h5>
                    <br>
                    <h3 class="price">
                      <sup>$</sup>15<sup>.99</sup>
                      <span>per month</span>
                    </h3>

                    <hr>
                    <p><strong>5 GB</strong> Storage</p>
                    <p><strong>24x7</strong> Support</p>
                    <p><strong>50</strong> Project</p>
                    <p><strong>10</strong> User</p>

                    <br><br>
                    <a class="btn btn-bold btn-block btn-info-outline" href="#">Select plan</a>
                  </div>
                </div>
              </div>

            </div>


    </section>
    <!-- /.content -->
  </div>


</div>


	<!-- jQuery 3 -->
	<script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
	
	<!-- popper -->
	<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>
	
	<!-- Bootstrap 4.0-->
	<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
	
	<!-- SlimScroll -->
	<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	
	<!-- FastClick -->
	<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
	
	<!-- 洲博通 App -->
	<script src="../../js/template.js"></script>
	
	<!-- 洲博通 for demo purposes -->
	<script src="../../js/demo.js"></script>
	

</body>
</html>
